<template>
  <div class="payment-confirm-container">
    <div class="payment-header">
      <h1>确认支付</h1>
    </div>

    <div class="order-info">
      <div class="info-item">
        <span class="label">订单号：</span>
        <span class="value">{{ orderInfo.orderNo }}</span>
      </div>
      <div class="info-item">
        <span class="label">实付金额：</span>
        <span class="value price">¥{{ orderInfo.actualAmount?.toFixed(2) }}</span>
      </div>
      <div class="info-item">
        <span class="label">配送费：</span>
        <span class="value">¥{{ deliveryFee.toFixed(2) }}</span>
      </div>
    </div>

    <div class="payment-actions">
      <button class="action-btn confirm-pay" @click="handleConfirmPay">
        确认支付
      </button>
      <button class="action-btn pay-later" @click="handlePayLater">
        稍后支付
      </button>
      <button class="action-btn cancel-order" @click="handleCancelOrder">
        取消订单
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getOrderDetail, payOrder, cancelOrder } from '../../axios/order'

const router = useRouter()
const route = useRoute()
const orderInfo = ref({})
const deliveryFee = ref(10)

// 获取订单详情
const fetchOrderDetail = async () => {
  try {
    const orderId = route.query.orderId;
    console.log('获取订单详情，ID:', orderId);
    
    if (!orderId) {
      ElMessage.error('订单信息不存在');
      router.push('/orders');
      return;
    }

    const response = await getOrderDetail(orderId);
    console.log('订单详情响应:', response);
    
    if (response.code === 1 && response.data) {
      orderInfo.value = response.data;
      console.log('获取到订单详情:', orderInfo.value);
      
      // 如果订单ID不存在，给出提示
      if (!orderInfo.value.id) {
        ElMessage.warning('订单ID不完整，可能影响支付和取消操作');
      }
    } else {
      ElMessage.error(response.msg || '获取订单详情失败');
      setTimeout(() => {
        router.push('/orders');
      }, 2000);
    }
  } catch (err) {
    console.error('获取订单详情失败:', err);
    ElMessage.error('获取订单详情失败，将返回订单列表');
    setTimeout(() => {
      router.push('/orders');
    }, 2000);
  }
};
//1111111
// 确认支付
const handleConfirmPay = async () => {
  try {
    if (!orderInfo.value.orderNo || !orderInfo.value.actualAmount) {
      ElMessage.error('订单信息不完整');
      return;
    }
    
    console.log('正在支付订单，订单号:', orderInfo.value.orderNo);
    const response = await payOrder(orderInfo.value.orderNo, orderInfo.value.actualAmount);
    console.log('支付响应:', response);
    
    if (response) {
      // 支付宝返回的是一个HTML表单,需要将其插入到页面中
      const div = document.createElement('div');
      div.innerHTML = response;
      document.body.appendChild(div);
      document.forms[0].submit();
    } else {
      ElMessage.error('支付失败');
    }
  } catch (err) {
    console.error('支付失败:', err);
    ElMessage.error('支付失败，请稍后重试');
  }
};

// 稍后支付
const handlePayLater = () => {
  router.push('/orders');
};

// 取消订单
const handleCancelOrder = async () => {
  try {
    // 确保传递的是Long类型的ID
    const orderId = Number(orderInfo.value.id);
    if (!orderId) {
      ElMessage.error('订单ID不存在');
      return;
    }
    
    console.log('正在取消订单，ID:', orderId);
    const response = await cancelOrder(orderId);
    
    if (response.code === 1) {
      ElMessage.success('订单已取消');
      router.push('/orders');
    } else {
      ElMessage.error(response.msg || '取消订单失败');
    }
  } catch (err) {
    console.error('取消订单失败:', err);
    ElMessage.error('取消订单失败，请稍后重试');
  }
};

onMounted(() => {
  fetchOrderDetail()
})
</script>

<style scoped>
.payment-confirm-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.payment-header {
  text-align: center;
  margin-bottom: 40px;
}

.payment-header h1 {
  color: #2c3e50;
  font-size: 28px;
}

.order-info {
  background: white;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 18px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  color: #666;
}

.value {
  color: #2c3e50;
  font-weight: 500;
}

.value.price {
  color: #e74c3c;
  font-size: 24px;
  font-weight: bold;
}

.payment-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.action-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.confirm-pay {
  background: #4CAF50;
  color: white;
}

.confirm-pay:hover {
  background: #45a049;
}

.pay-later {
  background: #f8f9fa;
  color: #2c3e50;
  border: 1px solid #ddd;
}

.pay-later:hover {
  background: #e9ecef;
}

.cancel-order {
  background: #e74c3c;
  color: white;
}

.cancel-order:hover {
  background: #c0392b;
}

@media (max-width: 768px) {
  .payment-confirm-container {
    padding: 15px;
  }

  .order-info {
    padding: 20px;
  }

  .info-item {
    font-size: 16px;
  }

  .value.price {
    font-size: 20px;
  }
}
</style> 